<template>
  <view class="container">
    <!-- 背景装饰元素 -->
    <view class="decor-circle circle-1"></view>
    <view class="decor-circle circle-2"></view>

    <!-- 登录卡片 -->
    <view class="login-card">
      <text class="title">欢迎加入</text>
      <text class="subtitle">请设置您的头像和昵称！</text>

      <!-- 头像选择 -->
      <view class="avatar-section">
        <button
          class="avatar-wrapper"
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
        >
          <image class="avatar" :src="avatarUrl"></image>
          <view class="avatar-edit-icon">+</view>
        </button>
      </view>

      <!-- 昵称填写 -->
      <view class="input-section">
        <input
          type="nickname"
          class="nickname-input"
          placeholder="请输入昵称"
          placeholder-class="placeholder"
          @blur="onNicknameBlur"
        />
        <view class="input-border"></view>
      </view>

      <!-- 提交按钮 -->
      <button class="submit-btn" @click="handleSubmit">开始使用</button>
    </view>
  </view>
</template>

<script>
import { login_API, getUserInfo_API } from "../../api/login";
export default {
  data() {
    return {
      avatarUrl:
        "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0", // 默认头像URL
      nickname: "",
    };
  },
  methods: {
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail;
      this.avatarUrl = avatarUrl;
    },
    onNicknameBlur(e) {
      this.nickname = e.detail.value;
    },
    async handleSubmit() {
      if (!this.nickname) {
        uni.showToast({
          title: "请填写昵称",
          icon: "none",
        });
        return;
      }
      if (!this.avatarUrl) {
        uni.showToast({
          title: "请选择头像",
          icon: "none",
        });
        return;
      }
      const res = await login_API({
        headImage: this.avatarUrl,
        name: this.nickname,
      });
      uni.showToast({
        title: "登录成功",
        icon: "success",
      });
      const result = await getUserInfo_API();
      if (result) {
        uni.setStorageSync("USER-INFO", JSON.stringify(result));
      }
      this.$to("/pages/home/index", false, "tabbar");
    },
  },
  onLoad(options) {
    if (uni.getStorageSync("USER-INFO")) {
      this.$to("/pages/home/index", false, "tabbar");
    }
  },
};
</script>

<style>
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
  overflow: hidden;
}

/* 装饰圆圈 */
.decor-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.circle-1 {
  width: 300rpx;
  height: 300rpx;
  top: -100rpx;
  left: -100rpx;
}

.circle-2 {
  width: 200rpx;
  height: 200rpx;
  bottom: -50rpx;
  right: -50rpx;
}

/* 登录卡片 */
.login-card {
  width: 85%;
  background: white;
  border-radius: 20rpx;
  padding: 60rpx 50rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #888;
  margin-bottom: 60rpx;
}

/* 头像部分 */
.avatar-section {
  margin-bottom: 60rpx;
}

.avatar-wrapper {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  background: #f5f5f5;
  position: relative;
  overflow: visible;
  border: 6rpx solid white;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar-edit-icon {
  position: absolute;
  bottom: -10rpx;
  right: -10rpx;
  width: 50rpx;
  height: 50rpx;
  background: #4db366;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  font-weight: bold;
  border: 4rpx solid white;
}

/* 输入框部分 */
.input-section {
  width: 100%;
  margin-bottom: 60rpx;
  position: relative;
}

.nickname-input {
  width: 100%;
  height: 80rpx;
  font-size: 30rpx;
  padding: 0 20rpx;
  border-bottom: 2rpx solid #e0e0e0;
  transition: all 0.3s;
}

.nickname-input:focus {
  border-bottom-color: transparent;
}

.input-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2rpx;
  background: #4a90e2;
  transition: all 0.3s;
}

/* .nickname-input:focus ~ .input-border {
    width: 100%;
  } */

.placeholder {
  color: #bbb;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: linear-gradient(to right, #4db366, #4db366);
  color: white;
  border-radius: 45rpx;
  font-size: 32rpx;
  margin-top: 20rpx;
  box-shadow: 0 5rpx 15rpx rgba(74, 144, 226, 0.3);
  transition: all 0.3s;
}

.submit-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 3rpx 10rpx rgba(74, 144, 226, 0.3);
}
</style>
